<template>
  <div class="container">
    <div class="card-container">
      <div class="card-left">
        <span>
          <h1>奖学金管理系统</h1>
          <p>Scholarship Management System.</p>
        </span>
      </div>
      <div class="card-right">
        <span>
          <h2>登录</h2>
        </span>
        <form>
          <input v-model="username" placeholder="请输入用户名">
<!--          <input v-model="password" type="password" placeholder="请输入密码">-->
          <div class="password-input-group">
            <input
                v-model="password"
                type="password"
                placeholder="请输入密码"
                @input="checkFormValidity"
            >
            <i
                class="fas fa-eye"
                @click="togglePasswordVisibility"
                :class="{ 'fa-eye-slash': isPasswordVisible }"
            ></i>
          </div>

          <button>登录</button>
          <p>忘记密码?注册</p>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>






<style
    scoped lang="scss">/* ... 原有的样式代码保持不变 ... */
</style>

<style scoped lang="scss">
.container {
  padding-top: 50%;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/图片1.jpg");
  background-size: cover;
  position: relative;
}
.card-container {
  /* 修改为fixed定位，使其悬浮 */
  position: fixed;
  /* 通过top、right、bottom、left居中固定卡片容器 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 70%;
  height: 70%;

  .card-left {
    width: 50%;
    background-color: #a42a2a;
    border-radius: 10px 0 0 10px;

    span {
      display: block;
      color: #fff;
      margin-top: 40%;
      margin-left: 4%;

      h1 {
        text-align: left;
        font-size: 3em;
        font-weight: 600;
        margin-top: -13%;
        transform: translateX(5px);
      }

      p {
        margin-top: 2%;
        font-size: 2em;
        font-weight: 400;
        transform: translateX(5px);
      }
    }
  }

  .card-right {
    width: 50%;
    background-color: rgb(255, 237, 237);
    border-radius: 0 10px 10px 0;
    span{
      h2 {
        font-size: 2.5em;
        font-weight: 600;
        margin-top: 15%;
        margin-left: 7%;
        color: #000000;
      }
    }

    form {
      margin-top: 8%;
      margin-left: 7%;
      width: 75%;

      input {
        margin-bottom: 10%;
        outline: none;
        border-color: #000000 !important;
        width: 100%;
        border: none;
        border-bottom: 1px solid #fffefe;
        padding: 10px 0;
        background: none;
        color: #000000;
        font-size: 1.2em;
      }

      button {
        color: #fff;
        border-radius: 5px;
        border: none;
        padding: 5%;
        padding-top: 3%;
        padding-bottom: 3%;
        background-color: #de6d6d;
      }

      p {
        margin-top: 5%;
        color: #db6561 !important;
      }

      p:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}

</style>